<template>
  <div
    style="
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    "
  >
    <div
      id="login1"
      :class="{ recaptcha: recaptcha }"
      @keydown.enter="submit"
      style="
        display: flex;
        width: 1400px;
        height: 80%;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        background-color: white;
        box-shadow:
          4px 4px 15px rgba(0, 0, 0, 0.1),
          -4px -4px 15px rgba(255, 255, 255, 0.01);
      "
    >
      <div
        style="
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 16px;
        "
      >
        <div style="height: 100%; border-radius: 20px">
          <img
            src="@/assets/login.png"
            alt=""
            style="
              border-radius: 20px;
              height: 100%;
              width: 100%;
              object-fit: cover;
            "
          />
        </div>
      </div>
      <div style="width: 450px">
        <!--        <form-->
        <!--          @submit="submit"-->
        <!--          style="-->
        <!--            display: flex;-->
        <!--            flex-direction: column;-->
        <!--            align-items: center;-->
        <!--            width: 100%;-->
        <!--            justify-content: center;-->
        <!--          "-->
        <!--        >-->
        <!--          <div-->
        <!--            style="-->
        <!--              width: 80%;-->
        <!--              display: flex;-->
        <!--              flex-direction: column;-->
        <!--              align-content: center;-->
        <!--            "-->
        <!--          >-->
        <!--            &lt;!&ndash;            <div style="display: flex; justify-content: center">&ndash;&gt;-->
        <!--            &lt;!&ndash;              <img :src="logoURL" alt="File Browser" width="100px" />&ndash;&gt;-->
        <!--            &lt;!&ndash;            </div>&ndash;&gt;-->
        <!--            <h1 style="text-align: center; font-size: 50px">{{ name }}</h1>-->
        <!--            <div style="height: 40px"></div>-->
        <!--            <div v-if="error !== ''" class="wrong">{{ error }}</div>-->

        <!--            <input-->
        <!--              autofocus-->
        <!--              class="input input&#45;&#45;block"-->
        <!--              type="text"-->
        <!--              autocapitalize="off"-->
        <!--              v-model="username"-->
        <!--              :placeholder="t('login.username')"-->
        <!--              style="border-radius: 8px"-->
        <!--            />-->
        <!--            <div style="height: 20px"></div>-->
        <!--            <input-->
        <!--              class="input input&#45;&#45;block"-->
        <!--              type="password"-->
        <!--              v-model="password"-->
        <!--              :placeholder="t('login.password')"-->
        <!--              style="border-radius: 8px"-->
        <!--            />-->
        <!--            <div style="height: 20px"></div>-->
        <!--            <input-->
        <!--              class="input input&#45;&#45;block"-->
        <!--              v-if="createMode"-->
        <!--              type="password"-->
        <!--              v-model="passwordConfirm"-->
        <!--              :placeholder="t('login.passwordConfirm')"-->
        <!--              style="border-radius: 8px"-->
        <!--            />-->

        <!--            <div v-if="recaptcha" id="recaptcha"></div>-->
        <!--            <el-button-->
        <!--              type="primary"-->
        <!--              class="login_button"-->
        <!--              tabindex="3"-->
        <!--              size="large"-->
        <!--              @click="submit"-->
        <!--              >登录</el-button-->
        <!--            >-->
        <!--            &lt;!&ndash;            <input&ndash;&gt;-->
        <!--            &lt;!&ndash;              class="button button&#45;&#45;block"&ndash;&gt;-->
        <!--            &lt;!&ndash;              type="submit"&ndash;&gt;-->
        <!--            &lt;!&ndash;              style="background-color: #1749d7; border-radius: 8px"&ndash;&gt;-->
        <!--            &lt;!&ndash;              :value="createMode ? t('login.signup') : t('login.submit')"&ndash;&gt;-->
        <!--            &lt;!&ndash;            />&ndash;&gt;-->

        <!--            <p @click="toggleMode" v-if="signup">-->
        <!--              {{-->
        <!--                createMode-->
        <!--                  ? t("login.loginInstead")-->
        <!--                  : t("login.createAnAccount")-->
        <!--              }}-->
        <!--            </p>-->
        <!--          </div>-->
        <!--        </form>-->
        <el-form
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
          "
        >
          <h1 style="text-align: center; font-size: 50px">{{ name }}</h1>
          <div
            style="
              display: flex;
              flex-direction: column;
              align-items: center;
              width: 80%;
            "
          >
            <el-form-item style="width: 100%">
              <div style="margin-bottom: 6px; color: #131313">用户名</div>
              <el-input
                v-model="username"
                placeholder="请输入用户名"
                class="login-input"
              ></el-input>
            </el-form-item>
            <el-form-item style="width: 100%">
              <div style="margin-bottom: 6px; color: #131313">密码</div>
              <el-input
                v-model="password"
                placeholder="请输入密码"
                class="login-input"
                show-password
              ></el-input>
            </el-form-item>
            <!--          <el-form-item>-->
            <!--            <div style="display: flex;flex-direction: column;width: 100%;align-items: start">-->
            <!--              <div style="margin-bottom: 6px;color: #131313">图形验证码</div>-->
            <!--              <div style="display: flex;width: 100%">-->
            <!--                <el-input v-model="captcha" placeholder="请输入图形验证码" class="login-input" @keydown.enter="login()"></el-input>-->
            <!--                <img :src="captchaStr" alt="" style="width: 120px;margin-left: 10px" @click="getCaptchaFunc()">-->
            <!--              </div>-->
            <!--            </div>-->

            <!--          </el-form-item>-->
            <el-button
              type="primary"
              size="large"
              style="width: 100%; margin-top: 10px; background-color: #1749d7"
              @click="submit"
            >
              登 录
            </el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { StatusError } from "@/api/utils";
import * as auth from "@/utils/auth";
import { name, recaptcha, recaptchaKey } from "@/utils/constants";
import { inject, onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";

// Define refs
const createMode = ref<boolean>(false);
const error = ref<string>("");
const username = ref<string>("");
const password = ref<string>("");
const passwordConfirm = ref<string>("");

const route = useRoute();
const router = useRouter();
const { t } = useI18n({});
// Define functions
const toggleMode = () => (createMode.value = !createMode.value);

const $showError = inject<IToastError>("$showError")!;

const submit = async (event: Event) => {
  event.preventDefault();
  event.stopPropagation();
  if (username.value.trim() === "") {
    ElMessage({
      message: "请输入用户名",
      type: "error",
    });
    return;
  }
  if (password.value.trim() === "") {
    ElMessage({
      message: "请输入密码",
      type: "error",
    });
    return;
  }

  const redirect = (route.query.redirect || "/files/") as string;

  let captcha = "";
  if (recaptcha) {
    captcha = window.grecaptcha.getResponse();

    if (captcha === "") {
      error.value = t("login.wrongCredentials");
      return;
    }
  }

  if (createMode.value) {
    if (password.value !== passwordConfirm.value) {
      error.value = t("login.passwordsDontMatch");
      return;
    }
  }

  try {
    if (createMode.value) {
      await auth.signup(username.value, password.value);
    }

    await auth.login(username.value, password.value, captcha);
    await router.push({ path: redirect });
  } catch (e: any) {
    // console.error(e);
    if (e instanceof StatusError) {
      if (e.status === 409) {
        error.value = t("login.usernameTaken");
      } else if (e.status === 403) {
        error.value = t("login.wrongCredentials");
      } else {
        $showError(e);
      }
    }
    ElMessage({
      message: error.value,
      type: "error",
    });
  }
};

// Run hooks
onMounted(() => {
  if (!recaptcha) return;

  window.grecaptcha.ready(function () {
    window.grecaptcha.render("recaptcha", {
      sitekey: recaptchaKey,
    });
  });
});
</script>
<style scoped></style>
